<template>
    <section class="msite">

        <HeaderTop :title="address.name">
            <router-link slot="left" to="/search" class="header_search">
             <i class="iconfont icon-sousuo"></i>
            </router-link>
            <router-link slot="right" to="/login" class="header_login">
             <span class="header_login_text">登录|注册</span>
            </router-link>
        </HeaderTop>
        <!--首页导航-->
        <!-- 首页占位符 -->
        <MisteNav></MisteNav>
        <!--首页附近商家-->
        
         <!-- 占位符 -->
        <ShopList></ShopList>
      </section>
</template>

<script>
// 引入swiper 插件

import HeaderTop from '../../components/HeaderTop/HeaderTop'
import MisteNav from '../../components/MisteNav/MisteNav'
import ShopList from '../../components/ShopList/ShopList'
// import {reqAddress} from '../../api/index.js'
import {mapState} from 'vuex'
export default{
    props:{

    },
    data(){
        return{
          //  mytitle:'昌平区北七家宏福科技园(337省道北)'
        };
    },
    computed:{ // 主要是映射state getters
      ...mapState(['address'])
    },
    created(){

    },
    mounted(){ 
      // 异步请求
      this.$store.dispatch('getAddress')
      this.$store.dispatch('getCategorys')
      this.$store.dispatch('getShops')
    //  reqAddress().then(res=>{
    //    console.log(res);
    //  })
    },
    watch:{

    },
    methods:{

    },
    components:{
      HeaderTop,
      ShopList,
      MisteNav
    },
};
</script>

<style scoped lang='stylus'>
@import '../../common/stylus/mixins.styl'
 &.msite  //首页
          width 100%
          .msite_shop_list
            top-border-1px(#e4e4e4)
            margin-top 10px
            background #fff
            .shop_header
              padding 10px 10px 0
              .shop_icon
                margin-left 5px
                color #999
              .shop_header_title
                color #999
                font-size 14px
                line-height 20px   
</style>